<template>
  <container>
    <div class="filter-container">
        <el-form ref="form" :inline="true" :model="formInline" class="form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="岗位名称">
                        <el-input placeholder="请输入内容" v-model="formInline.name"  prefix-icon="el-icon-search" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18" class="btn-container">
                    <el-button icon="el-icon-search" type="primary"  @click="search">查询</el-button>
                    <el-button icon="el-icon-refresh"  @click="search('reset')">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
   <div class="btn-container">
      <el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
    </div>
    <el-table 
        :data="dataTable" 
        row-key="id" 
        default-expand-all
        :indent="36"
        style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="id" label="岗位编号" ></el-table-column>
      <el-table-column prop="name" label="岗位名称"></el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
            <div class="operation-btn">
                <el-button icon="el-icon-edit" @click="edit(scope.row.id,scope.row.name)" type="text"
                    >编辑</el-button>
                <el-popconfirm title="您确定要删除吗？" 
                    @confirm="deleteById(scope.row.id,scope.row.name)">
                    <el-button icon="el-icon-delete" slot="reference" type="text" class="btn-danger">删除</el-button>
                </el-popconfirm>
            </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pagesize"
          @pagination="dataTable"
        />

    <el-dialog :title="title"  v-if="dialogNewVisible==true" 
            :close-on-click-modal="false"
            :visible.sync="dialogNewVisible"
            @close="cloaseDialog" custom-class="center-dialog">
              <slot name="-" style="border: none;padding: 0px;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:95%" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="岗位名称" prop="name">
                    <el-input v-model="ruleForm.name" ></el-input>
                  </el-form-item>
                  
                  <el-form-item style="margin-right:100px">
                    <el-button v-if="isAdd==true" type="primary" @click="add">确认</el-button>
                    <el-button v-if="isAdd==false" type="primary" @click="saveEdit">保存</el-button>
                    <el-button @click="cloaseDialog">取消</el-button>
                  </el-form-item>
                </el-form>
              </slot>
      </el-dialog>
  </container>
</template>

<script>
  import { positionListPage, addPosition, updatePosition, deletePosition } from '@/api/orgm/orgm'

  export default {
    name: "position",
    data() {
      return {
        formInline: {
          name: ''
        },
        total:0,
        // 查询参数
        queryParams: {
          page: 1,
          pagesize: 10
        },
        title:'',
        isAdd:true,
        dataTable:[],
        dialogNewVisible: false,
        ruleForm: {
          id:'',
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入岗位名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    components: {

    },//页面加载后渲染
    mounted(){
      this.loadData();
    },
    methods:{
      //dialog关闭事件
      cloaseDialog(){
        this.dialogNewVisible = false;
        this.loadData();
      },//初始化表格数据
      loadData(){
        positionListPage(this.queryParams).then(res => {
          if(res.error=="200"){
            this.dataTable = res.result.list;
            this.total=res.result.total;
          }
          else{
            this.$message.error("获取失败");
          }
        })
      },
      reload(){
        this.loadData();
      },//新建
      openDialog(){
        this.title="新建";
        this.isAdd=true;
        this.ruleForm.name='';
        this.ruleForm.id='';
        this.dialogNewVisible = true;
      },//编辑
      edit(id,name){
        this.isAdd=false;
        this.title="修改";
        this.ruleForm.name=name;
        this.ruleForm.id=id;
        this.dialogNewVisible = true;
      },//加载所属类型
      //新增
      add(){
        if(this.ruleForm.name==""){
          this.$message.error("请填写岗位名称");
          return;
        }
        addPosition(this.ruleForm).then(res => {
          if(res.error=="200"){
            this.$message.success("添加成功");
            this.dialogNewVisible = false;
            setTimeout(()=>{this.reload();},1000);
          }
          else{
            this.$message.error("增加失败");
          }
        })
      },//保存
      saveEdit(){
        updatePosition(this.ruleForm).then(res => {
          if(res.error=="200"){
            this.$message.success("修改成功");
            this.dialogNewVisible = false;
            setTimeout(()=>{this.reload();},1000);
          }
          else{
            this.$message.error("修改失败");
          }
        })
      },//删除
      deleteById(id,name){
        this.$confirm("确定要删除["+name+"]?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.ruleForm.name=name;
            this.ruleForm.id=id;
            deletePosition(this.ruleForm).then(res => {
              if(res.error=="200"){
                this.$message.success("删除成功");
                this.dialogNewVisible = false;
                setTimeout(()=>{this.reload();},1000);
              }
              else{
                this.$message.error("删除失败");
              }
            })
					})
					.catch(() => {
            this.ruleForm.name='';
            this.ruleForm.id='';
          });
      },
        search(type) {
        if (type === 'reset') {
          this.$refs.form.resetFields();
        }
        this.reload();
      }
    }
    
  }
  
</script>

